<template>
	<div class="header-wrap" :class="{'hide-shadow': hideShadow}">
		<header>
			<div v-if="showBack" class="header-left" @click="back(myurl)">
				<i class="iconfont">&#xe601;</i> 
			</div>
			<div v-else class="header-left"></div>

			<div class="header-title">
				<slot>{{title}}</slot>
			</div>

			<div class="header-right" @click="rightEvent">
				 <slot name="right"></slot>
			</div>
		</header>
	</div>
</template>

<script type="text/javascript">
	export default {

		props: {
			title: [String],
			myurl: String,
			showBack: {
				type: Boolean,
				default: true
			},
			hideShadow: {
				type: Boolean,
				default: false
			},
		},

		methods: {
			back(myurl) {
				if (myurl) {
					this.$router.push(myurl);
				} else {
					this.$router.go(-1);
				}
			},

			rightEvent() {
				this.$emit('right-event'); 
			}
		}
	}
</script>

<style type="text/css" lang="scss">
	.header-wrap {
		height: 44px;
	}

	.hide-shadow {

		header {
			box-shadow: none;
		}
	}
	
	header {
		position: fixed;
		top: 0;
		z-index: 101;
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		background: #FFFFFF;
		/*box-shadow: 0 0 0 0 rgba(0,0,0,0.15);*/
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
		padding: 0 16px;
		/*position: relative;*/

		&:after {
			content: '';
			width: 100%;
			height: 1px;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #E5E5E5;
			transform: scaleY(.5);
		}

		.header-left {
			position: relative;
			left: -4px;
			width: 70px; 
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-shrink: 0;
			height: 100%;

			i {
				font-size: 30px;
				color: #9F9F9F;
			}

			img {
				width: 30px;
				height: 30px;
			}
		}

		.header-title {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 17px;
			color: #303030;
			flex-grow: 1; 
		}

		.header-right {
			display: flex;
			width: 70px; 
			height: 100%;
			flex-shrink: 0;
			align-items: center;
			text-align: right;
			justify-content: flex-end;
		}
	}
</style>